<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09-计算属性</title>
</head>
<!-- 
    在某些情况下,我们可能需要对数据进行一些转化后再显示,比如:
    我们有 firstName 和 lastName 两个变量,我么需要显示完整的名称;但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}}{{lastName}}
    就不方便了,我们可以将其转换成计算属性:
-->

<body>
    <div id="app">
        <h3>名:{{lastName}} 姓:{{firstName}}</h3>
        <h3>{{getFullName()}}</h3>
        <h3>{{getFullName()}}</h3>
        <h3>{{fullName}}</h3>
        <h3>{{fullName}}</h3>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            firstName: '勒布朗',
            lastName: '詹姆斯'
        },
        //写一个方法将完整的名字拼接出来,并返回,这样方便一些
        methods: {
            getFullName() {
                console.log("getFullName()")
                return this.lastName + ' ' + this.firstName
            }
        },
        //新知识:通过计算属性计算出完整的名字,当data里的相关属性未发生变化时,它只计算一次,相当于将数据缓存起来
        computed: {
            fullName() {
                console.log("fullName()")
                return this.lastName + '~' + this.firstName
            }
        }
    })
</script>

</html>